<template>
  <div class="el-container">
    <div class="content">
      <div v-for="(item, index) in appList" :style="index % 2 !== 0 && 'margin-top: 80px'" :key="item.id" class="item">
        <img class="img" :src="item.iconUrl" alt="logo" />
        <div class="text">{{ item.appName }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { defineProps } from "vue";

const props = defineProps({
  appList: {
    type: Array
  }
});
</script>

<style lang="scss" scoped>
.el-container {
  display: flex;
  flex-direction: column;
}
.title {
  position: relative;
  z-index: 2;
  margin: auto;
  font-size: 28px;
  font-weight: 700;
  color: #1981ff;
  span {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 120px;
    height: 14px;
    background-color: #d2e3ff;
    border-radius: 4px;
    opacity: 0.5;
    transform: translateX(-50%);
  }
}
.content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 1406px;

  //   height: 885px;
  margin: 42px auto 82px;
  .item {
    display: flex;
    flex-direction: column;
    width: 428px;
    height: 428px;
    overflow: hidden;
    color: rgb(57 99 166 / 100%);
    border-radius: 2px;
    box-shadow: 0 2px 10px 0 rgb(0 72 174 / 30%);
    .img {
      flex-basis: 330px;
      width: 100%;
      height: 330px;
      margin-bottom: 0;
    }
    .text {
      flex-grow: 1;
      padding: 31px 25px 23px;
      margin: 0 1px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      background-color: #f4f9ff;
    }
    .mb20 {
      margin-bottom: 20px;
    }

    // box-shadow: rgb(0 72 174 / 30%);
  }
}
</style>
